<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云轮播图</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .banner{
            height: 285px;
            background-color: orange;
            background: url(../images/banner_2.jpg)  center / 6000px;
        }
        .banner .area{
            height: 285px;
            background-color: orange;    
            position: relative;
        }
        .banner .area .area-left{
            position: relative;
            width: 730px;
        }

        .banner .area-left .img-list{
            /* 轮播图那肯定左右布局嘛 */
            display: flex;
            /* 超出部分隐藏掉，否则会整体长度太长了 */
            overflow: hidden;
        }

        .banner .area-left .img-list li{
            /* 不希望缩小，因为放不下默认是会压缩的，
               当然如果设置不缩小，那就父容器也限制不住大小了 */
            flex-shrink: 0;
            width: 100%;
        }

        .banner .area-left .img-list .item{
           display: block; 
        }
        .banner .area-left .img-list .item img{
           width: 100%;
           height: 285px;
        }

        /* 点的列表 */
        .banner .area-left .dots-list{
            position: absolute;
            bottom: 5px;
            /* 不能单独用下面三连招水平居中，因为必须自身有宽度才行 */
            /* 但是这样设置的话，该元素的宽度就自动占满父盒子了 */
            left: 0;
            right: 0;
            margin: 0 auto;
            display: flex;
            /* 这时候直接用flex布局的居中就可以了，因为宽度有父盒子的宽度 */
            justify-content: center;
        }
        .banner .area-left .dots-list li{
            margin: 0 2px;
        }
        .banner .area-left .dots-list .item{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: red;
            background: url(../images/banner_sprite.png) 3px -343px;
        }
        .banner .area-left .dots-list .item.active,
        .banner .area-left .dots-list .item:hover
        {
            background-position: -16px -343px;
        }

        .banner .area-right {
            position: absolute;
            right: -1px;
            width: 254px;
            /* 除了显示设置高度，也可以top0 bottom0 和 height:100% */
            /* height: 285px; */
            top: 0;
            bottom: 0;
            background: url(../images/download_sprite.png);
        }

        /* 这个是计算出来的，无脑复制就行了，因为这块是使用了background
           但是要有一个小手的效果，所以就用了这个手段 */
        .banner .area-right .download{
            display: block;
            width: 215px;
            height: 56px;
            margin: 186px 0 0 19px;
            text-indent: -9999px;
        }

        .banner .area-right .download:hover{
            background: url(../images/download_sprite.png) 0 -290px;
        }

        .banner .area-right .desc{
            margin-top: 10px;
            font-size: 12px;
            color: #8d8d8d;
            text-align: center;
        }

        .banner .area .control{
            position: absolute;
            width: 37px;
            height: 63px;
            /* 垂直居中大法 */
            top: 0;
            bottom: 0;
            margin: auto 0;
            background-color: aquamarine;
            background: url(../images/banner_sprite.png);
        }
        .banner .area .control.left{
            left: -70px;
            background-position: 0 -360px;
        }
        .banner .area .control.left:hover{
            background-position: 0 -430px;
        }
        
        .banner .area .control.right{
            right: -70px;
            background-position: 0 -508px;
        }   
        .banner .area .control.right:hover{
            background-position: 0 -578px;
        }  
    </style>
</head>
<body>
    <div class="banner">
        <div class="area wrapper_03">
            <div class="area-left">
                <!-- 轮播图 -->
                <ul class="img-list">
                    <li>
                        <a class="item" href="#">
                            <img src="../images/banner.jpg" alt="">
                        </a>
                    </li>
                    <!-- 第二个被overflow:hidden隐藏掉了 -->
                    <li>
                        <a class="item" href="#">
                            <img src="../images/banner.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <!-- 小点点 -->
                <ul class="dots-list">
                    <li><a href="" class="item active"></a></li>
                    <li><a href="" class="item"></a></li>
                    <li><a href="" class="item"></a></li>
                    <li><a href="" class="item"></a></li>
                    <li><a href="" class="item"></a></li>
                    <li><a href="" class="item"></a></li>
                    <li><a href="" class="item"></a></li>
                    <li><a href="" class="item"></a></li>
                    <li><a href="" class="item"></a></li>
                    <li><a href="" class="item"></a></li>
                </ul>
            </div>
            <!-- 这里的宽度实际上是往左覆盖1px，往右多出1px 绝对定位做法 -->
            <div class="area-right">
                <!-- 这个a标签单纯是做点击效果的，里面文字直接隐藏 -->
                <a class="download" href="#">下载客户端</a>
                <p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
            <!-- 两个控制按钮 -->
            <a class="control left" href="#"></a>
            <a class="control right" href="#"></a>
        </div>
    </div>
</body>
</html>